<template>
    <div class="page-body">
        <div class="hearder-top">
            <router-link to="/sort" class="fa fa-list-ul"></router-link>
            <div id="search">
                <router-link :to="{path:'/kind/skind/',query:{skind:val}}">
                    <span class="search-icon">
                    <i class="fa fa-search"></i></span>
                </router-link>
                <input type="text" class="search-input" placeholder="三周年庆 爆款1折起" @input="entry" v-model="val">
            </div>
            <router-link to="/login" v-if="!userinfo">登录</router-link>
            <span v-if="userinfo" @touchstart="logoutBtn" style="color:white">退出</span>
        </div>
        <div id="more" :class="{'disappear':val==''}">
        <div v-for="a in arr" :class="{'font':a==val}">
        <router-link :to="{path:'/kind/skind/',query:{skind:a}}">
          {{a}}
          <span class="fa fa-reply"></span>
          </router-link>
        </div>
      </div>
        <div id="charroot">
        <Swiper 
            :list="list" 
            auto 
            loop  
            dots-position = "center"
        ></Swiper>
        <div id="four">
            <router-link to="" v-for="f in four" :key="f.img">
                <img :src="f.img">
            </router-link>
        </div>
        <div class="pics">
            <img src="static/images/1.png">
            <div class="pics2">
                <router-link to="" v-for="f in five" :key="f.img">
                    <img :src="f.img">
                </router-link>
            </div>
        </div>
        <div class="lb">
            <router-link to="" v-for="l in leibie" :key="l.img">
                <img :src="l.img">
            </router-link>
        </div>
         <div class="choice">
            <img src="static/images/2.png">
            <div id="news">
                <router-link to="" v-for="n in news" :key="n.img">
                    <img :src="n.img">
                </router-link>
            </div>
        </div>
         <div class="choice">
            <img src="static/images/3.png">
            <div id="cho">
                <router-link to="" v-for="c in choice" :key="c.img">
                    <img :src="c.img">
                </router-link>
            </div>
        </div>
        <div class="pics"> 
            <router-link to="" v-for="g in groom" :key="g.img">
                <img :src="g.img">
            </router-link>
        </div>
        <div id="goodAll">
            <router-link :to="{path:'/kind/skind/skindItem',query:{_id:g._id}}" v-for="g in goodsAll" :key="g.goodsname"> 
                <div>
                <img :src="'/imgs/goods/'+g.pics[0]">
                </div>
                <div>
                    <p>{{g.goodsname}}</p>
                    <p style="color:red">￥{{g.price}}</p>
                </div>
            </router-link>
        </div>
        </div>
        <Scrolltop></Scrolltop>
        <TabBar></TabBar>
    </div>
</template>

<script>
import {Swiper} from 'vux'
import {mapState} from 'vuex'
import TabBar from '@/components/TabBar.vue'
import Scrolltop from '@/components/Scrolltop.vue'
export default {
    data:function(){
        return{
            val:"",
            arr:[],
        }
    },
    components:{
        TabBar,
        Swiper,
        Scrolltop
    },
    computed:{
        ...mapState([
            "list",
            "four",
            "five",
            "leibie",
            "choice",
            "news",
            "groom",
            "goodsAll",
            "userinfo"
        ])
    },
    mounted:function(){
        this.$store.dispatch("requestList");
        this.$store.dispatch("requestList");
        this.$store.dispatch("requestList");
        this.$store.dispatch("requestList");
        this.$store.dispatch("requestList");
        this.$store.dispatch("requestList");
        this.$store.dispatch("requestList");
        this.$store.dispatch("requestGoodsAll");
    },
    methods:{
        entry:function(){
            if(this.val){
                this.http.post("/api/search",{txt:this.val})
                .then(res=>{
                    this.arr = res.data.msg
                })
            }else{
                this.arr=[];
            }
        },
        logoutBtn:function(){
            this.http.post("/api/users/loginout")
            .then(res=>{
                layer.msg(res.data.msg)
                window.location.reload();
            })
        }
    } 
}    
</script>

<style scoped>
    .hearder-top{
        background-color:red;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:40px;
        display:flex;
        justify-content:space-between;
        line-height:40px;
        z-index:1;
    }
       .hearder-top a{
        line-height:40px;
        padding-left:5px;
        padding-right:5px;
        color:white;
        font-size:14.5px;
        text-decoration:none;
    }
    #search{
        background:#fff;
        width:70%;
        border-radius:5px;
        height:30px;
        line-height:30px;
        margin-top:5px;
    }
    #search a{
        line-height:30px;
    }
    .search-input{
        width:85%;
        border:none;
    }
    .search-icon{
        color:#ccc;
    }
    #charroot{
        margin-top:40px;
    }
    #four{
        width:100%;
        margin-top:10px; 
    }
    #four img{
        margin: 0 4%;
        width:17%;
        height:100%;
    }
    .pics{
        width:100%;
    }
    .pics img{
        width:100%;
    }
    .pics2{
        display:flex;
        width:100%;
    }
    .pics2 img
    {
        width:100%;
        overflow:hidden;
    }
    .lb{
        margin-top:15px;
    }
    .lb #cho{
        width:100%;  
    }
    .lb img{
        width:50%;
    }
    .choice{
        width:100%;
        margin:8px 0;
    }
    .choice img{
        width:100%;
    }
    #cho img{
        width:50%;
    }
    #news{
        display:flex;
    }
    #goodAll{
        width:98%;
        height:50px;
        font-size:12px;
    }
    #goodAll a{
        display:flex;
        color:#999999;
    }
    #goodAll div:nth-of-type(1){
        text-align:left;
        width:34%;
    }
    #goodAll img{
        width:100%;
        height:auto;
    }
    #goodAll div:nth-of-type(2){
        width:64%;
    }
    #goodAll div:nth-of-type(2)>p{
        
        text-align:left;
    }
</style>